<div class="pac__toolbar pac-model__shell-bar flex justify-between items-center px-2 py-1">
    <div class="flex justify-start items-center" cdkMenuBar>
      @if (isMobile()) {
        <button cdkMenuItem class="pac-model__page-trigger flex-1"
            [cdkMenuTriggerFor]="mobileMenu">
            <mat-icon fontSet="material-icons-outlined">more_horiz</mat-icon>
        </button>
      }
      @if (!isMobile()) {
        <button cdkMenuItem [cdkMenuTriggerFor]="generalMenu" class="relative flex items-center">
          <span>{{ 'PAC.KEY_WORDS.GENERAL' | translate: {Default: "General"} }}</span>
          <i class="ri-arrow-drop-down-line text-xl"></i>
          @if (isDirty()) {
            <pac-dirty-badge class="absolute left-2 top-2"/>
          }
        </button>
        <button cdkMenuItem [cdkMenuTriggerFor]="editMenu" class="flex items-center">
          <span>{{ 'PAC.KEY_WORDS.EDIT' | translate: {Default: "Edit"} }}</span>
          <i class="ri-arrow-drop-down-line text-xl"></i>
        </button>
        <button cdkMenuItem [cdkMenuTriggerFor]="dataMenu" class="flex items-center">
          <span>{{ 'PAC.KEY_WORDS.DATA' | translate: {Default: "Data"} }}</span>
          <i class="ri-arrow-drop-down-line text-xl"></i>
        </button>
        <button cdkMenuItem [cdkMenuTriggerFor]="manageMenu" class="flex items-center">
          <span>{{ 'PAC.KEY_WORDS.Management' | translate: {Default: "Management"} }}</span>
          <i class="ri-arrow-drop-down-line text-xl"></i>
        </button>
      }
        <div [routerLink]="['./access']" routerLinkActive #rla="routerLinkActive">
          <button *ngIf="rla.isActive" mat-button [color]="'accent'">
            <span class="font-notoColorEmoji">🔏</span>{{ 'PAC.MODEL.AccessControl.Title' | translate: {Default: "Access Control"} }}
          </button>
        </div>
    
        <div [routerLink]="['./query']" routerLinkActive #rla2="routerLinkActive">
          <button mat-button [color]="rla2.isActive?'accent':''">
            <span class="font-notoColorEmoji">🧪</span>{{ 'PAC.MODEL.QUERY.TITLE' | translate: {Default: "Query Lab"} }}
          </button>
        </div>
    </div>

    <div class="flex justify-between items-center">
        <button mat-icon-button displayDensity="cosy" (click)="toggleFullscreen()">
            <mat-icon *ngIf="!isFullscreen" fontSet="material-icons-round">fullscreen</mat-icon>
            <mat-icon *ngIf="isFullscreen" fontSet="material-icons-round">fullscreen_exit</mat-icon>
        </button>
        <!-- <button mat-icon-button *ngIf="copilotEnabled$ | async" class="pac-model__copilot-trigger font-notoColorEmoji"
            displayDensity="cosy"
            [class.active]="copilotDrawer.opened"
            [color]="copilotDrawer.opened?'accent':''"
            (click)="copilotDrawer.toggle()"
        >
            <div class="flex justify-center items-center text-xl">🤖</div>
        </button> -->
    </div>

</div>

<mat-drawer-container class="flex-1" autosize>
    <mat-drawer #drawer class="ngm-story__designer-drawer ngm-sidenav-container-bg-transparent mat-elevation-z"
        [(opened)]="sideMenuOpened"
        [mode]="isMobile() ? 'over' : 'side'"
        ngmResizer [resizerWidth]="230"
    >
        <ngm-splitter class="h-full mr-1" [type]="1">
            <ngm-splitter-pane size='50%' class="flex flex-col justify-items-stretch items-stretch">
                <mat-toolbar displayDensity="compact" class="shrink-0 flex justify-between items-center">

                    <button mat-icon-button class="text-neutral-600" (click)="closeSidebar()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" class="icon-xl-heavy">
                            <path fill="currentColor" fill-rule="evenodd" d="M8.857 3h6.286c1.084 0 1.958 0 2.666.058.729.06 1.369.185 1.961.487a5 5 0 0 1 2.185 2.185c.302.592.428 1.233.487 1.961.058.708.058 1.582.058 2.666v3.286c0 1.084 0 1.958-.058 2.666-.06.729-.185 1.369-.487 1.961a5 5 0 0 1-2.185 2.185c-.592.302-1.232.428-1.961.487C17.1 21 16.227 21 15.143 21H8.857c-1.084 0-1.958 0-2.666-.058-.728-.06-1.369-.185-1.96-.487a5 5 0 0 1-2.186-2.185c-.302-.592-.428-1.232-.487-1.961C1.5 15.6 1.5 14.727 1.5 13.643v-3.286c0-1.084 0-1.958.058-2.666.06-.728.185-1.369.487-1.96A5 5 0 0 1 4.23 3.544c.592-.302 1.233-.428 1.961-.487C6.9 3 7.773 3 8.857 3M6.354 5.051c-.605.05-.953.142-1.216.276a3 3 0 0 0-1.311 1.311c-.134.263-.226.611-.276 1.216-.05.617-.051 1.41-.051 2.546v3.2c0 1.137 0 1.929.051 2.546.05.605.142.953.276 1.216a3 3 0 0 0 1.311 1.311c.263.134.611.226 1.216.276.617.05 1.41.051 2.546.051h.6V5h-.6c-1.137 0-1.929 0-2.546.051M11.5 5v14h3.6c1.137 0 1.929 0 2.546-.051.605-.05.953-.142 1.216-.276a3 3 0 0 0 1.311-1.311c.134-.263.226-.611.276-1.216.05-.617.051-1.41.051-2.546v-3.2c0-1.137 0-1.929-.051-2.546-.05-.605-.142-.953-.276-1.216a3 3 0 0 0-1.311-1.311c-.263-.134-.611-.226-1.216-.276C17.029 5.001 16.236 5 15.1 5zM5 8.5a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1M5 12a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1" clip-rule="evenodd"></path>
                        </svg>
                    </button>

                    <span>{{ 'PAC.MODEL.MODEL.Entities' | translate: {Default: "Entities"} }}</span>

                    <span class="flex-1"></span>
                    
                    <button mat-icon-button displayDensity="cosy" class="ngm-copilot-command-button ngm-toolbar__action"
                        [matTooltip]=" 'Copilot.GenerateWithAI' | translate: {Default: 'Generate with AI'} "
                        matTooltipPosition="above"
                        (click)="aiCreateEntity()">
                        <mat-icon fontSet="material-icons-outlined">auto_fix_high</mat-icon>
                    </button>
                    <button mat-icon-button displayDensity="cosy" class="ngm-toolbar__action"
                        [matTooltip]=" 'PAC.MODEL.MODEL.New' | translate: {Default: 'New'} "
                        matTooltipPosition="above"
                        (click)="createEntity()"
                    >
                        <mat-icon>add</mat-icon>
                    </button>
                </mat-toolbar>

                <mat-nav-list displayDensity="compact" disableRipple class="pac-model__nav-list pac-cdk-drop__list"
                    id="pac-model-entities"
                    cdkDropList
                    [cdkDropListData]="entities$ | async"
                    (cdkDropListDropped)="drop($event)"
                    [cdkDropListEnterPredicate]="entityPredicate"
                >
                  <div class="max-h-full overflow-hidden hover:overflow-y-auto">
                    @for (entity of entities$ | async; track entity.id) {
                        <a mat-list-item class="pac-model__nav-item relative"
                            [class.selected]="rla.isActive"
                            [routerLink]="[entity.type === SemanticModelEntityType.CUBE ? 'entity' : 'dimension', entity.id]"
                            routerLinkActive #rla="routerLinkActive"
                            cdkDrag
                            [cdkDragData]="entity"
                        >
                          @if (cube() === entity.name) {
                            <i class="ri-star-fill" [matTooltip]="'PAC.MODEL.IsDefault' | translate: {Default: 'Is default'}"></i>
                          }
                          @switch (entity.type) {
                            @case(SemanticModelEntityType.CUBE) {
                                <mat-icon class="pac-model__nav-icon"
                                    displayDensity="compact" fontSet="material-icons-outlined">deployed_code</mat-icon>
                            }
                            @case(SemanticModelEntityType.DIMENSION) {
                                <mat-icon class="pac-model__nav-icon"
                                    displayDensity="compact" fontSet="material-icons-outlined">account_tree</mat-icon>
                            }
                          }
                            
                            <ngm-display-behaviour class="flex-1 overflow-hidden"
                                [option]="{key: entity.name, caption: entity.caption}">
                            </ngm-display-behaviour>

                          @if (isDirty(entity.id)) {
                            <pac-dirty-badge class="absolute left-2 top-2"/>
                          }

                            <button mat-icon-button displayDensity="compact" class="pac-model__nav-action"
                                [cdkMenuTriggerFor]="entityMenu"
                                [cdkMenuTriggerData]="{entity: entity}"
                                #mt="cdkMenuTriggerFor"
                                [class.active]="mt.isOpen()"
                                (click)="$event.stopPropagation();$event.preventDefault()">
                                <mat-icon>more_vert</mat-icon>
                            </button>
                        </a>
                    }

                    <a mat-list-item *ngFor="let entity of virtualCubes$ | async; trackBy: trackById"
                        [routerLink]="['virtual-cube', entity.__id__]"
                        routerLinkActive #rla="routerLinkActive"
                        [class.selected]="rla.isActive"
                        cdkDrag
                        [cdkDragData]="entity"
                        (mouseenter)="actionStrip.show()"
                        (mouseleave)="actionStrip.hide()">
                        <mat-icon class="pac-model__nav-icon" displayDensity="compact" fontSet="material-icons-outlined">dataset_linked</mat-icon>
                        <ngm-display-behaviour class="flex-1"
                            [option]="{key: entity.name, caption: entity.caption}" />
                        <ngm-action-strip #actionStrip [hidden]="true">
                            <button mat-icon-button color="warn" displayDensity="cosy"
                                (click)="$event.stopPropagation();$event.preventDefault();deleteEntity(entity.__id__)">
                                <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
                            </button>
                        </ngm-action-strip>
                    </a>
                  </div>
                </mat-nav-list>
            </ngm-splitter-pane>

            <ngm-splitter-pane class="relative flex flex-col justify-start items-stretch">
                <mat-toolbar displayDensity="compact" class="shrink-0">
                    <mat-toolbar-row class="flex justify-between items-center">
                        <span>{{ 'PAC.MODEL.MODEL.TABLES' | translate: {Default: "Tables"} }}</span>

                        <div class="flex">
                            <button mat-icon-button color="warn" displayDensity="cosy" class="pac-cdk-drop__recycle-bin"
                                cdkDropList
                                [cdkDropListEnterPredicate]="tableRemovePredicate"
                                (cdkDropListDropped)="dropTable($event)"
                            >
                                <mat-icon color="warn" fontSet="material-icons-round">delete_forever</mat-icon>
                            </button>
                            <button mat-icon-button displayDensity="cosy" class="ngm-toolbar__action"
                                [matTooltip]=" 'PAC.MODEL.MODEL.RefreshSchema' | translate: {Default: 'Refresh Schema'} "
                                (click)="refreshSchema()">
                                <mat-icon fontSet="material-icons-round">refresh</mat-icon>
                            </button>
                            <button *ngIf="isWasm$()" mat-icon-button displayDensity="cosy" class="ngm-toolbar__action"
                                [matTooltip]=" 'PAC.MODEL.MODEL.NewTable' | translate: {Default: 'New Table'} "
                                (click)="addTable()">
                                <mat-icon fontSet="material-icons-round">add</mat-icon>
                            </button>
                            <button *ngIf="writable$()" mat-icon-button displayDensity="cosy" class="ngm-toolbar__action"
                                [matTooltip]=" 'PAC.MODEL.MODEL.UploadTable' | translate: {Default: 'Upload Table'} "
                                (click)="uploadTable()">
                                <mat-icon fontSet="material-icons-round">upload</mat-icon>
                            </button>
                            <button *ngIf="dbInitialization" mat-icon-button displayDensity="cosy" class="ngm-toolbar__action"
                                [matTooltip]=" 'PAC.MODEL.MODEL.RemoveDBInitScript' | translate: {Default: 'Remove DB Init Script'} "
                                (click)="removeDBInit()">
                                <mat-icon fontSet="material-icons-round">playlist_remove</mat-icon>
                            </button>
                        </div>

                    </mat-toolbar-row>
                    <mat-toolbar-row>
                        <ngm-search class="pac-model__search" [formControl]="searchControl"></ngm-search>
                    </mat-toolbar-row>
                </mat-toolbar>

                <div class="relative flex-1">
                    
                    @if (entitySets$ | async; as entities) {
                        <cdk-virtual-scroll-viewport class="pac-model__tables-viewport flex-1 h-full overflow-hidden hover:overflow-y-auto"
                            itemSize="30" minBufferPx="360" maxBufferPx="1000"
                        >
                            <mat-nav-list displayDensity="compact" disableRipple class="pac-model__nav-list ngm-list"
                                id="pac-model-entitysets"
                                #tableList="cdkDropList"
                                cdkDropList
                                [cdkDropListData]="entities"
                                (cdkDropListDropped)="drop($event)"
                                >
                                <mat-list-item *cdkVirtualFor="let entity of entities"
                                    cdkDrag
                                    [cdkDragData]="entity"
                                    (cdkDragReleased)="onDragReleased($event)"
                                    (mouseenter)="actionStrip.show()"
                                    (mouseleave)="actionStrip.hide()">
                                    <ngm-display-behaviour class="flex-1 overflow-hidden"
                                        [option]="{value: entity.name, label: entity.caption || entity.label}"
                                        [highlight]="searchControl.value"
                                        >
                                    </ngm-display-behaviour>

                                    <ngm-action-strip #actionStrip [hidden]="true">
                                        <button mat-icon-button *ngIf="isWasm$() && entity.sourceUrl" displayDensity="compact"
                                            (click)="$event.stopPropagation();$event.preventDefault();editTable(entity)">
                                            <mat-icon>edit</mat-icon>
                                        </button>
                                        <button mat-icon-button *ngIf="isWasm$() && entity.sourceUrl" color="warn" displayDensity="compact"
                                            (click)="$event.stopPropagation();$event.preventDefault();deleteTable(entity)">
                                            <mat-icon>delete</mat-icon>
                                        </button>
                                    </ngm-action-strip>
                                </mat-list-item>
                            </mat-nav-list>
                        </cdk-virtual-scroll-viewport>
                      @if (loadingTables()) {
                        <div class="absolute top-1/2 left-1/2 -ml-2 -mt-2 flex">
                            <mat-progress-spinner color="accent" mode="indeterminate" [diameter]="23" [strokeWidth]="2" />
                        </div>
                      }
                    } @else {
                        <bullet-list-content-loader class="dark:opacity-20"/>
                    }

                    @if (dbTablesError()) {
                        <div class="pac-result w-full h-full absolute top-0 left-0 text-sm">
                            <div class="bug font-notoColorEmoji">🐞</div>
                            <div class="description flex-1 basis-0">
                                {{dbTablesError()}}
                            </div>
                        </div>
                    }
                </div>
                
            </ngm-splitter-pane>
        </ngm-splitter>

        <div ngmResizerBar resizerBarPosition="right"
            cdkDrag
            cdkDragLockAxis="x"
        ></div>
    </mat-drawer>
    <mat-drawer-content>
      <div class="pac-model-content w-full flex-1 overflow-auto">
        <router-outlet #o="outlet"></router-outlet>
      </div>

      <!-- <ngm-drawer-trigger class="absolute -left-1 top-6 -translate-y-1/2 z-40"
        [(opened)]="sideMenuOpened"
        [matTooltip]="'PAC.MODEL.MODEL.ModelStructure' | translate: {Default: 'Model Structure'}"
        matTooltipPosition="after" /> -->
    </mat-drawer-content>
</mat-drawer-container>
    

<ng-template #mobileMenu>
    <div cdkMenu class="p-2">
        <button cdkMenuItem class="px-2 py-1 rounded-lg" [cdkMenuTriggerFor]="generalMenu" class="relative">
            <span>{{ 'PAC.KEY_WORDS.GENERAL' | translate: {Default: "General"} }}</span>
            <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
          @if (isDirty()) {
            <pac-dirty-badge class="absolute left-2 top-2"/>
          }
        </button>
        <button cdkMenuItem class="px-2 py-1 rounded-lg" [cdkMenuTriggerFor]="editMenu">
            <span>{{ 'PAC.KEY_WORDS.EDIT' | translate: {Default: "Edit"} }}</span>
            <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
        </button>
        <button cdkMenuItem class="px-2 py-1 rounded-lg" [cdkMenuTriggerFor]="dataMenu">
            <span>{{ 'PAC.KEY_WORDS.DATA' | translate: {Default: "Data"} }}</span>
            <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
        </button>
        <button cdkMenuItem class="px-2 py-1 rounded-lg" [cdkMenuTriggerFor]="manageMenu">
            <span>{{ 'PAC.KEY_WORDS.Management' | translate: {Default: "Management"} }}</span>
            <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
        </button>
    </div>
</ng-template>

<ng-template #generalMenu>
  <div cdkMenu class="p-2">
    <button cdkMenuItem class="px-2 py-1 rounded-lg" [disabled]="!isDirty()" (click)="saveModel()">
        <mat-icon fontSet="material-icons-outlined" [color]="isDirty() ?'accent':''">save</mat-icon>
        <span class="ml-2">{{ 'PAC.ACTIONS.SAVE' | translate: {Default: "Save"} }}</span>
    </button>

    <button cdkMenuItem class="px-2 py-1 rounded-lg" (click)="openPreferences($event)">
        <mat-icon fontSet="material-icons-outlined">settings_suggest</mat-icon>
        <span class="ml-2">{{ 'PAC.KEY_WORDS.PREFERENCES' | translate: {Default: "Preferences"} }}</span>
    </button>

    <button cdkMenuItem class="px-2 py-1 rounded-lg" (click)="onDownload()">
        <mat-icon fontSet="material-icons-outlined">file_download</mat-icon>
        <span class="ml-2">{{ 'PAC.ACTIONS.Download' | translate: {Default: 'Download'} }}</span>
    </button>

    <div class="border-b border-solid border-divider-regular my-1"></div>
    <button cdkMenuItem class="flex justify-between items-center px-2 py-1 rounded-lg" [cdkMenuTriggerFor]="storyMenu">
        <span>
            {{ 'PAC.MENU.STORY_LIST' | translate: {Default: "Story List"} }}
        </span>
        <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
    </button>
  </div>
</ng-template>

<ng-template #editMenu>
    <div cdkMenu class="p-2">
        <button cdkMenuItem class="px-2 py-1 rounded-lg" (click)="undo()">
            <mat-icon fontSet="material-icons-outlined">undo</mat-icon>
            <span class="ml-2">{{ 'PAC.KEY_WORDS.Undo' | translate: {Default: "Undo"} }}</span>
        </button>
        <button cdkMenuItem class="px-2 py-1 rounded-lg" (click)="redo()">
            <mat-icon fontSet="material-icons-outlined">redo</mat-icon>
            <span class="ml-2">{{ 'PAC.KEY_WORDS.Redo' | translate: {Default: "Redo"} }}</span>
        </button>

        <button cdkMenuItem class="px-2 py-1 rounded-lg" (click)="createStory()">
            <mat-icon fontSet="material-icons-outlined">auto_stories</mat-icon>
            <span class="ml-2">{{ 'PAC.ACTIONS.CREATE_STORY' | translate: {Default: "Create Story"} }}</span>
        </button>
        <button cdkMenuItem class="px-2 py-1 rounded-lg" (click)="createIndicator()">
            <mat-icon fontSet="material-icons-outlined">trending_up</mat-icon>
            <span class="ml-2">{{ 'PAC.ACTIONS.CreateIndicator' | translate: {Default: "Create Indicator"} }}</span>
        </button>
    
        <button cdkMenuItem class="px-2 py-1 rounded-lg" (click)="reset()">
            <mat-icon fontSet="material-icons-outlined">restart_alt</mat-icon>
            <span class="ml-2">{{ 'PAC.MODEL.Reset' | translate: {Default: "Reset"} }}</span>
        </button>
    
        <!-- <button mat-menu-item>
            <mat-icon fontSet="material-icons-outlined">functions</mat-icon>
            {{ 'PAC.ACTIONS.ADD_CALCULATED_MEMBER' | translate: {Default: "Add Calculated Member"} }}
        </button>
        <button mat-menu-item>
            <mat-icon fontSet="material-icons-outlined">content_copy</mat-icon>
            {{ 'PAC.ACTIONS.COPY' | translate: {Default: "Copy"} }}
        </button>
    
        <button mat-menu-item>
            <mat-icon fontSet="material-icons-outlined">low_priority</mat-icon>
            {{ 'PAC.ACTIONS.TOGGLE_CALCULATION_PRIORITIZATION_MODE' | translate: {Default: "Toggle Calculation Prioritization Mode"} }}
        </button> -->
    </div>
</ng-template>

<ng-template #dataMenu>
    <div cdkMenu class="p-2">
        <!-- <button mat-menu-item>
            <mat-icon fontSet="material-icons-outlined">code</mat-icon>
            {{ 'PAC.KEY_WORDS.VARIABLES' | translate: {Default: "Variables"} }}
        </button> -->
        
        <button cdkMenuItem class="px-2 py-1 rounded-lg" (click)="refreshSchema()">
            <mat-icon fontSet="material-icons-outlined">model_training</mat-icon>
            <span class="ml-2">{{ 'PAC.ACTIONS.REFRESH_DATA_SOURCE_SCHEMA' | translate: {Default: "Refresh Data Source Schema"} }}</span>
        </button>

        <button cdkMenuItem class="px-2 py-1 rounded-lg" [disabled]="clearingServerCache" (click)="clearServerCache()">
            <mat-icon fontSet="material-icons-outlined">clear_all</mat-icon>
            <span class="ml-2">{{ 'PAC.MODEL.ClearServerCache' | translate: {Default: "Clear Server Cache"} }}</span>
        </button>

        <button cdkMenuItem class="px-2 py-1 rounded-lg" [routerLink]="['./member-retriever']">
            <mat-icon fontSet="material-icons-outlined">tag</mat-icon>
            <span class="ml-2">{{ 'PAC.KEY_WORDS.MemberRetriever' | translate: {Default: "Member Retriever"} }}</span>
        </button>
    </div>
</ng-template>

<ng-template #storyMenu>
  <div cdkMenu class="p-2">
    <button cdkMenuItem class="px-2 py-1 rounded-lg" (click)="createStory()">
        <mat-icon fontSet="material-icons-outlined">dashboard</mat-icon>
        <span class="ml-2">{{ 'PAC.ACTIONS.CREATE_STORY' | translate: {Default: "Create Story"} }}</span>
    </button>

    <div class="border-b border-solid border-divider-regular my-1"></div>

    <button cdkMenuItem *ngFor="let story of stories$ | async" class="px-2 py-1 rounded-lg"
        (click)="openStory(story.id)">
        {{story.name}}
    </button>
  </div>
</ng-template>

<ng-template #manageMenu>
    <div cdkMenu class="p-2">
        <button cdkMenuItem class="px-2 py-1 rounded-lg" [routerLink]="['.']">
            <mat-icon fontSet="material-icons-outlined">hub</mat-icon>
            <span class="ml-2">{{ 'PAC.MODEL.ModelOverview' | translate: {Default: "Model Overview"} }}</span>
        </button>
    
        <button cdkMenuItem class="px-2 py-1 rounded-lg" [routerLink]="['./admin']">
            <mat-icon fontSet="material-icons-outlined">admin_panel_settings</mat-icon>
            <span class="ml-2">{{ 'PAC.KEY_WORDS.Admin' | translate: {Default: "Admin"} }}</span>
        </button>
    
        <button cdkMenuItem *ngIf="isOlap$()" [routerLink]="['./access']" class="px-2 py-1 rounded-lg">
            <mat-icon fontSet="material-icons-outlined">manage_accounts</mat-icon>
            <span class="ml-2">{{ 'PAC.MODEL.AccessControl.Title' | translate: {Default: "Access Control"} }}</span>
        </button>
    </div>
</ng-template>

<ng-template #entityMenu let-entity="entity">
  <div cdkMenu class="cdk-menu__medium">
    @if (entity.type === SemanticModelEntityType.CUBE) {
      <button cdkMenuItem class="px-2 py-1 rounded-lg disabled:cursor-not-allowed disabled:opacity-50"
        [disabled]="cube() === entity.name"
        (click)="saveAsDefaultCube(entity.name)"
      >
        <i class="ri-star-fill"></i>
        <span class="ml-2">{{ 'PAC.MODEL.SaveAsDefaultCube' | translate: {Default: "Save as Default Cube"} }}</span>
      </button>
    }
    
    <button cdkMenuItem class="danger px-2 py-1 rounded-lg"
      (click)="deleteEntity(entity.id)"
    >
      <i class="ri-delete-bin-line"></i>
      <span class="ml-2">{{ 'PAC.ACTIONS.Delete' | translate: {Default: "Delete"} }}</span>
    </button>
  </div>
</ng-template>

<ng-template #tableTemplate let-message="message">
  @if (message.data['header']) {
    <div >{{message.data['header']}}</div>
  }
    <ngm-table class="max-w-full rounded-lg border overflow-hidden"
        [columns]="message.data['columns']"
        [data]="message.data['content']"
        paging
        [pageSizeOptions]="[10, 20, 50, 100]"
    ></ngm-table>
</ng-template>